<html>
<head>
<title>day09作业-学习热点登录页面-正则.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #aa7dfc;}
.s3 { color: #bbb529;}
.s4 { color: #52cb54;}
.s5 { color: #e2da90;}
.s6 { color: #db7e9b;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
day09作业-学习热点登录页面-正则.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">promptAction </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.ArkUI'</span>

<span class="s3">@</span><span class="s0">Entry</span>
<span class="s3">@</span><span class="s0">Component</span>
<span class="s0">struct Index </span><span class="s1">{</span>
  <span class="s4">//1、定义两个状态变量，获取监听用户输入的用户名和密码</span>
  <span class="s3">@</span><span class="s0">State username</span><span class="s5">: </span><span class="s0">string </span><span class="s5">= </span><span class="s2">''</span>
  <span class="s3">@</span><span class="s0">State password</span><span class="s5">: </span><span class="s0">string </span><span class="s5">= </span><span class="s2">''</span>

  <span class="s4">//2.1、判断如果用户输入格式不正确，提示客户，正确则为true</span>
  <span class="s4">//3、用户名不符合检验，提示用户</span>
  <span class="s4">//4、点击获取状态变量数据</span>
  <span class="s0">build</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s5">: </span><span class="s7">50 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
      <span class="s0">Image</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s2">'app.media.logo_login'</span><span class="s6">))</span>
        <span class="s5">.</span><span class="s0">width</span><span class="s6">(</span><span class="s7">150</span><span class="s6">)</span>
      <span class="s0">Column</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s5">: </span><span class="s7">30 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
        <span class="s4">//1.1 绑定给两个输入框文本</span>
        <span class="s0">TextInput</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">placeholder</span><span class="s5">: </span><span class="s2">'请输入用户名'</span><span class="s5">, </span><span class="s0">text</span><span class="s5">: </span><span class="s0">$$this</span><span class="s5">.</span><span class="s0">username </span><span class="s1">}</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">placeholderColor</span><span class="s6">(</span><span class="s2">'#ccc'</span><span class="s6">)</span>

          <span class="s5">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">60</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">border</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">width</span><span class="s5">: </span><span class="s1">{ </span><span class="s0">bottom</span><span class="s5">: </span><span class="s7">1 </span><span class="s1">}</span><span class="s5">,</span>
            <span class="s0">color</span><span class="s5">: </span><span class="s2">'#e6e6e6'</span>
          <span class="s1">}</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s7">0</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s5">.</span><span class="s0">Transparent</span><span class="s6">)</span>
        <span class="s0">TextInput</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">placeholder</span><span class="s5">: </span><span class="s2">'请输入密码'</span><span class="s5">, </span><span class="s0">text</span><span class="s5">: </span><span class="s0">$$this</span><span class="s5">.</span><span class="s0">password </span><span class="s1">}</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">type</span><span class="s6">(</span><span class="s0">InputType</span><span class="s5">.</span><span class="s0">Password</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">placeholderColor</span><span class="s6">(</span><span class="s2">'#ccc'</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">60</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">border</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">width</span><span class="s5">: </span><span class="s1">{ </span><span class="s0">bottom</span><span class="s5">: </span><span class="s7">1 </span><span class="s1">}</span><span class="s5">,</span>
            <span class="s0">color</span><span class="s5">: </span><span class="s2">'#e6e6e6'</span>
          <span class="s1">}</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s7">0</span><span class="s6">)</span>
          <span class="s5">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s5">.</span><span class="s0">Transparent</span><span class="s6">)</span>
      <span class="s1">}</span>
      <span class="s5">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
      <span class="s5">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s5">: </span><span class="s7">40</span><span class="s5">, </span><span class="s0">right</span><span class="s5">: </span><span class="s7">50 </span><span class="s1">}</span><span class="s6">)</span>

      <span class="s0">Button</span><span class="s6">(</span><span class="s2">'登录'</span><span class="s6">)</span>
        <span class="s5">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'70%'</span><span class="s6">)</span>
        <span class="s5">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">44</span><span class="s6">)</span>
        <span class="s5">.</span><span class="s0">fontSize</span><span class="s6">(</span><span class="s7">20</span><span class="s6">)</span>
        <span class="s5">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s2">'#C01D30'</span><span class="s6">)</span>
        <span class="s5">.</span><span class="s0">onClick</span><span class="s6">(() </span><span class="s5">=&gt; </span><span class="s1">{</span>
          <span class="s4">//2、定义正则</span>
          <span class="s0">const reg </span><span class="s5">= </span><span class="s2">/^[\w-]{4,16}$/</span>
          <span class="s0">const reg1 </span><span class="s5">= </span><span class="s2">/^[a-zA-Z0-9_-]{6}$/</span>
          <span class="s0">if </span><span class="s6">(</span><span class="s5">!</span><span class="s0">reg</span><span class="s5">.</span><span class="s0">test</span><span class="s6">(</span><span class="s0">this</span><span class="s5">.</span><span class="s0">username</span><span class="s6">)) </span><span class="s1">{</span>
            <span class="s0">promptAction</span><span class="s5">.</span><span class="s0">showToast</span><span class="s6">(</span><span class="s1">{</span>
              <span class="s0">message</span><span class="s5">: </span><span class="s2">'用户名不正确'</span><span class="s5">,</span>
              <span class="s0">duration</span><span class="s5">: </span><span class="s7">3000</span><span class="s5">,</span>
            <span class="s1">}</span><span class="s6">)</span>
            <span class="s4">// AlertDialog.show({ message: '用户名不正确' })</span>
            <span class="s0">return</span>
          <span class="s1">}</span>
          <span class="s0">if </span><span class="s6">(</span><span class="s5">!</span><span class="s0">reg1</span><span class="s5">.</span><span class="s0">test</span><span class="s6">(</span><span class="s0">this</span><span class="s5">.</span><span class="s0">password</span><span class="s6">)) </span><span class="s1">{</span>
            <span class="s0">promptAction</span><span class="s5">.</span><span class="s0">showToast</span><span class="s6">(</span><span class="s1">{</span>
              <span class="s0">message</span><span class="s5">: </span><span class="s2">'密码格式有误'</span><span class="s5">,</span>
              <span class="s0">duration</span><span class="s5">: </span><span class="s7">3000</span>
            <span class="s1">}</span><span class="s6">)</span>
          <span class="s1">}</span>
          <span class="s0">if </span><span class="s6">(</span><span class="s0">reg</span><span class="s5">.</span><span class="s0">test</span><span class="s6">(</span><span class="s0">this</span><span class="s5">.</span><span class="s0">username</span><span class="s6">) </span><span class="s5">&amp;&amp; </span><span class="s0">reg1</span><span class="s5">.</span><span class="s0">test</span><span class="s6">(</span><span class="s0">this</span><span class="s5">.</span><span class="s0">password</span><span class="s6">) </span><span class="s5">== </span><span class="s0">true</span><span class="s6">) </span><span class="s1">{</span>
            <span class="s0">promptAction</span><span class="s5">.</span><span class="s0">showToast</span><span class="s6">(</span><span class="s1">{</span>
              <span class="s0">message</span><span class="s5">: </span><span class="s2">'登录成功'</span><span class="s5">,</span>
              <span class="s0">duration</span><span class="s5">: </span><span class="s7">3000</span>
            <span class="s1">}</span><span class="s6">)</span>
          <span class="s1">}</span>
        <span class="s1">}</span><span class="s6">)</span>
    <span class="s1">}</span>
    <span class="s5">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
    <span class="s5">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s5">: </span><span class="s7">100 </span><span class="s1">}</span><span class="s6">)</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>